<%@ page pageEncoding="UTF-8"%>
<%@ include file="/common/validate.jsp"%>
<%@ include file="../function.jsp"%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天下布医</title>
    <link  href="/images/favicon.ico" rel="shortcut icon" type="image/x-icon">
    <link rel="stylesheet" href="/css/jquery.selectlist.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="/css/public.css?cache=<%=Math.random()%>" >
    <link rel="stylesheet" href="/css/messages_doctor_mes.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="../layui/css/layui.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="../demo/loading.css">
    <script src="/js/jquery-3.2.1.min.js"></script>
    <script src="../demo/loading.js"></script>
    <style>
        .title-row {
            line-height: 26px;
        }
        .title-row img {
            width: 12px;
            padding: 0 4px;
        }
        .add {
            display: inline-block;
            padding: 0 20px;
            background-color: #68cacb;
            color: #fff;
            border-radius: 5px;
            float: right;
            cursor: pointer;
        }
        table {
            text-align: center;
            width: 96%;
            border: 1px solid #dff2f2;
            border-collapse:collapse;
            margin-top: 10px;
        }
        tr {
            width: 100%;
            font-size: 15px;
        }
        tr:nth-child(odd) {
            background-color: #dff2f2;
        }
        tr:last-child {
            border-bottom: 0;
        }
        th {
            background-color: #68cacb;
            line-height: 45px;
            color: #fff;
            font-size: 16px;
        }
        td {
            line-height: 45px;
        }
        table span {
            cursor: pointer;
        }
        .title {
            width: 35%;
        }
        .type {
            width: 30%;
        }
        .operate {
            width: 35%;
        }
        .right_cont_container {
            padding: 20px;
        }
        .edit {
            cursor: pointer;
        }
        .del {
            cursor: pointer;
        }
        .none {
            display: none;
        }
        .show-block {
            display: block!important;
        }
        .hasdata {
            text-align: center;
            margin-top: 120px;
            display: none;
        }
    </style>
</head>
<body>
<%@ include file="/header.jsp"%>
<!--内容-->
<div class="containerone">
    <%@ include file="/left_menu.jsp"%>
    <!--右边内容-->
    <div class="right_cont">
        <div class="message_hos_news_container">
            <!--右边导航下面内容-->
            <div class="right_cont_container">
                <div id="app">
                    <div>
                        <div class="title-row">
                            <span>常见疾病</span>
                            <span><img src="../img/title-next.png"></span>
                            <span>疾病列表</span>
                            <%--<div class="add">添加</div>--%>
                        </div>
                        <div class="hasdata" :class="{'show-block':nodata}" v-if="nodata">
                            <img src="../img/nodata.png">
                            <div>暂时没有数据</div>
                        </div>
                        <table v-else>
                            <tr>
                                <th class="title">名称</th>
                                <th class="type">分组</th>
                                <th class="operate">操作</th>
                            </tr>
                            <tr v-for="(index,ill) in illList">
                                <td>{{ill.name}}</td>
                                <td>{{ill.tgname}}</td>
                                <td><span class="edit" @click="editIll(ill.id)">修改/</span><span class="del" @click="delIll(ill.id,index)">删除</span></td>
                            </tr>
                        </table>
                        <div id="demo1"></div>
                        <dell class="none" :class="{'show-block':showDel}"></dell>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<%@ include file="delIll.jsp"%>
</html>
<script src="../js/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            totalPage: "",
            illList: [],
            showDel: false,
            illIndex: "",
            nodata: false
        },
        methods: {
            editIll: function(id) {
                window.location.href = 'editIll.jsp?id='+ id
            },
            delIll: function(id,index) {
                this.showDel = true;
                this.$broadcast('doDel',id);
                this.illIndex = index;
            }
        },
        ready: function() {
            var _this = this;
            $.ajax({
                type: 'POST',
                url: "illList.jsp",
                data: {
                    act: "common_diseases",
                    hospital: "1070",
                    pageCount: "10",
                    pageNo: "1",
                    type: 'query',
                },
                success: function (res) {
                    //console.log(res);
                    res = JSON.parse(res);
                    if(res.errcode == 0) {
                        _this.totalPage = res.count;
                        _this.illList = res.data;
                        if(res.data.length == 0) {
                            _this.nodata = true;
                        }
                        setTimeout(function(){
                            aa();
                        },100);
                    }
                }
            })
        },
        components: {
            dell: delIll
        },
        events: {
            hideDel: function() {
                this.showDel = false;
            },
            delSuccess: function() {
                this.showDel = false;
                this.illList.splice(this.illIndex,1);
                if(this.illList.length == 0) {
                    window.location.reload();
                }
            }
        }
    })
    function aa() {
        layui.use(['laypage', 'layer'], function(){
            var laypage = layui.laypage;
            layer = layui.layer;
            laypage({
                cont: 'demo1',
                pages: vm.totalPage,
                groups: 5,
                jump: function(obj, first){
                    var curr = obj.curr;
                    $.ajax({
                        type: 'POST',
                        url: "illList.jsp",
                        data: {
                            act: "common_diseases",
                            hospital: "1070",
                            pageCount: "10",
                            pageNo: curr + "",
                            type: 'query'
                        },
                        success: function(res) {
                            //console.log(res);
                            res = JSON.parse(res);
                            if(res.errcode == 0) {
                                vm.totalPage = res.count;
                                vm.illList = res.data;
                                if(res.data.length == 0) {
                                    vm.nodata = true;
                                }
                            }
                        }
                    })
                }
            })
        })
    }
</script>
<script src="../layui/layui.js"></script>